<template>
  <div id="app">
    <h2>{{msg}}</h2>
    <br>
    <h3>{{obj.name}}</h3>
    <ul>
      <li v-for="item in list1">{{item.title}}</li>
    </ul>

     <ul>
      <li v-for="item in list2">
        {{item.cate}}
        <ol>
          <li v-for="news in item.list1">
           {{news.title}}
          </li>
        </ol>
        </li>
    </ul>
    <div v-bind:title="title">123</div>
    <img :src="url" alt="">
    <p v-html="h"></p>
    <div v-text="msg"></div>
    <ul>
      <li v-for="(item,key) in list" :class="{'red':key==0}">
        {{item}}
      </li>
    </ul>
    <div :class="{'red':flag}">
      我是一个div
    </div>
    {{h}}
    <div class="box" :style="{width:boxwidth+'px'}">
      我是一个div
    </div>
    <input type="text" v-model="msg">
    <button v-on:click="getMsg()">获取表单数据</button>
    <button v-on:click="setMsg()">获取表单数据</button>
    <input type="text" ref="userinfo">
    <div ref="box">我是一个盒子</div>
    <button v-on:click="getInputValue()">获取第二个表单的值</button>
    <br><br><br>
    <button @click="getSsd()">ssd</button>
    <br><br><br>
    <button @click="requesDate()">请求数据</button>
    <ul>
        <li v-for="item in list10">
          {{item}}
        </li>
    </ul>
    <br>
    <br>
    <br>
    <button @click="deleteDate('111')">请求数据12</button>
    <br>
    <br>
    <br>
    <button data-aid="chewu" @click="chenwuDate($event)">请求数据12</button>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () { 
    //业务逻辑里面定义的数据
    return {
      msg: '你好VUE',
      list10:[],
      title:"鼠标移上去看一下",
      url:"/src/assets/logo.png",
      h:"<h2>shjdajh</h2>",
      obj:{
        name:"小明是3号"
      },
      list:['111','222','333'],
      list1:[
        {'title':'111'},
        {'title':'222'},
        {'title':'333'}
      ],
      list2:[
        {
          "cate":"新翁111",
           "list1":[
                      {'title':'新翁111'},
                      {'title':'新翁222'},
                      {'title':'新翁333'}
                    ],
        },
        {
          "cate":"新翁222",
           "list1":[
                      {'title':'新翁111'},
                      {'title':'新翁222'},
                      {'title':'新翁333'}
                    ],
        }
      ],
      flag:true,
      boxwidth:300,
    }
  },methods:{
    getMsg(){
      this.msg,
      alert(this.msg)
    },
    setMsg(){
      this.msg="sdjaklwji"
    },
    getInputValue(){
      //
      console.log(this.$refs.userinfo);
      this.$refs.box.style.background="red",
      alert(this.$refs.userinfo.value)
    },
    getSsd(){
        alert(this.msg)
    },
    requesDate(){
        for(var i=0;i<10;i++){
            this.list10.push('我是第'+i+'条数据')
        }
            },
            deleteDate(val){
                alert(val)
                },
                chenwuDate(cw){
                   console.log(cw);
                   cw.srcElement.style.background="red"
                   console.log(cw.srcElement.dataset.aid);
                }
  }
}
</script>
<style >
.red{
  color: red
}
.box{
  height: 100px;
  width: 100px;
  background: red;
}
</style>

